<template>
    <div id="main1" style="width: 100%;height: 60vh;padding-top: 10px"></div>
</template>

<script>
    export default {
        components: {},
        props: {},
        data() {
            return {
                option : {
                    title: {
                        text: '各项体检健康指标',
                        subtext: '平均值'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['平均指标', '健康指标']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            // prettier-ignore
                            data: ['年龄', '身高', '体重', '血压', '血糖', '心率']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '平均指标',
                            type: 'bar',
                            data: [
                                22, 160, 120, 120, 80, 76.7
                            ],
                            markPoint: {
                                data: [
                                    { type: 'max', name: 'Max' },
                                    { type: 'min', name: 'Min' }
                                ]
                            },
                            // markLine: {
                            //     data: [{ type: 'average', name: 'Avg' }]
                            // }
                        },
                        {
                            name: '健康指标',
                            type: 'bar',
                            data: [
                                2.6, 5.9, 9.0, 26.4, 28.7,60
                            ],
                            markPoint: {
                                data: [
                                    { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                                    { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                                ]
                            },
                            // markLine: {
                            //     data: [{ type: 'average', name: 'Avg' }]
                            // }
                        }
                    ]
                }
            };
        },
        watch: {},
        computed: {},
        methods: {

            async getData() {
                const {data: res} = await this.$http.get('init/getInitAverageValue');
                console.log(res)
                this.option.series[1].data=res.data;
                this.init();
            },

            init(){
                let barChart=this.$echarts.init(document.getElementById("main1"));
                barChart.setOption(this.option);
            }
        },
        created() {
        },
        mounted() {
            this.getData();
        }
    };
</script>
<style>

</style>
